<template>
  <div class="swiper-box">
    <swiper :options="swiperOption" v-if="showSwiper">
      <!-- slides -->
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl" alt="">
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>

</template>

<script>
  export default {
    name: 'homeSwiper',
    props: {
      swiperList: Array
    },
    data (){
      return {
        swiperOption: {
          // 设置轮播图下方小圆点
          pagination: '.swiper-pagination',
          // 设置循环轮播，最后一页再向后翻显示第一页
          loop: true,
          // 自动轮播时间间隔
          autoplay: 5000,
          // 操作swiper后，不停止自动轮播
          autoplayDisableOnInteraction: false
        }
      }
    },
    computed: {
      showSwiper (){
        return this.swiperList.length
      }
    }
  }
</script>

<style  lang="stylus" scoped>
  @import '~@S/varibles.styl'
  // 利用样式穿透 scoped 的限制 设置轮播图下方小圆点的当前页颜色
  .swiper-box >>> .swiper-pagination-bullet-active
    background: #fff
  .swiper-box
    width: 100%
    height: 0
    overflow: hidden
    padding-bottom: 26.83%
    margin-top: $headerHeight
    .swiper-img
      width: 100%
</style>
